<template>
  <view v-if="shenheStatus == 0" class="code">
    <view class="codeBox">
      <view class="userPic">
        <image :src="pic"></image>
      </view>
      <text class="name">{{ name }}</text>
      <view class="codePic">
        <image :src="qrCode"></image>
        <text>{{ $t('salesman.code') }}</text>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      // 用户头像
      pic: '',
      // 用户名称
      name: '',
      // 二维码
      qrCode: '',
    };
  },
  methods: {
    // 生成二维码
    async getCode() {
      const res = await this.$allrequest.merchant.code({}, true);
      if (res.code == 0) {
        this.qrCode = res.data.qr_url;
      }
    },
  },
  onLoad(option) {
    this.pic = option.pic;
    this.name = option.name;
    this.getCode();
  },
};
</script>

<style lang="scss" scoped>
.code {
  min-height: 100vh;
  background-color: #f2f2f2;
  padding-top: 144rpx;
  font-family: PingFang SC;
  .codeBox {
    position: relative;
    width: 690rpx;
    height: 820rpx;
    border-radius: 20rpx;
    margin: 0 auto;
    background-color: #fff;
    padding: 96rpx 30rpx 0 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .userPic {
      position: absolute;
      left: 50%;
      top: -68rpx;
      transform: translateX(-50%);
      border: 4rpx solid #fff;
      width: 136rpx;
      height: 136rpx;
      border-radius: 50%;
      overflow: hidden;
      background-color: #f1f1f1;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      font-size: 40rpx;
      font-weight: 600;
      color: #262626;
    }
    .codePic {
      width: 100%;
      margin-top: 50rpx;
      border-top: 1px solid #f1f1f1;
      padding-top: 80rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 28rpx;
      color: #8c8c8c;
      image {
        width: 390rpx;
        height: 390rpx;
        margin-bottom: 40rpx;
        background-color: #f1f1f1;
      }
    }
  }
}
</style>
